<template>
  <div>
    <!-- 行内表单 条件查询 -->
    <el-form :inline="true" :model="queryForm" ref="queryForm" class="demo-form-inline">
      <el-form-item label="产品名称" prop="prodName">
        <el-input v-model="queryForm.prodName" placeholder="产品名称"></el-input>
      </el-form-item>
      <el-form-item label="产品系列" :label-width="formLabelWidth">
        <el-select v-model="queryForm.prodCategoryName" placeholder="请选择产品系列">
          <el-option :key="oneProdType.prodId" :label="oneProdType.prodChineseName"
                     :value="oneProdType.prodChineseName" v-for="oneProdType in prodTypeData"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" :label-width="formLabelWidth">
        <el-select v-model="queryForm.prodState" placeholder="请选择审核状态">
          <el-option label="审核通过" value="0"></el-option>
          <el-option label="审核中" value="1"></el-option>
          <el-option label="审核未通过" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="executeQuery()">查询</el-button>
        <el-button @click="resetForm('queryForm')">重置</el-button>
        <el-button type="success" @click="toAdd()">增加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 展示产品数据 -->
    <el-table :data="prodData" style="width: 100%">
      <el-table-column prop="prodId" label="产品名称ID" width="150"></el-table-column>
      <el-table-column prop="prodName" label="产品名称" width="150"></el-table-column>
      <el-table-column prop="prodCategoryName" label="产品系列" width="150"></el-table-column>
      <el-table-column prop="parentClass" label="二级分类" width="150"></el-table-column>
      <el-table-column prop="prodChannelName" label="机构名称" width="200"></el-table-column>
      <el-table-column prop="opeTime" label="开放时间" width="150"></el-table-column>
      <el-table-column prop="currencyType" label="币种" width="150"></el-table-column>
      <el-table-column prop="prodState" label="审核状态" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.prodState===0"><el-tag type="success" disable-transitions>审核通过</el-tag></span>
          <span v-if="scope.row.prodState===1"><el-tag type="info" disable-transitions>审核中</el-tag></span>
          <span v-if="scope.row.prodState===2"><el-tag type="danger" disable-transitions>审核未通过</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
          <span v-if="scope.row.prodState===2">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)">修改</el-button></span>
          <span v-if="scope.row.prodState===0">
            <el-button size="mini" type="primary" @click="toRemi(scope.$index, scope.row)">净值管理</el-button>
          </span>
          <!--<span v-if="scope.row.prodState===0">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)" :disabled="true">修改</el-button>
            <el-button size="mini" type="primary" @click="toRemi(scope.$index, scope.row)" :disabled="true">净值管理</el-button>
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
          </span>
          <span v-if="scope.row.prodState===1">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)" :disabled="true">修改</el-button>
            <el-button size="mini" type="primary" @click="toRemi(scope.$index, scope.row)" :disabled="true">净值管理</el-button>
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
          </span>
          <span v-if="scope.row.prodState===2">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="primary" @click="toRemi(scope.$index, scope.row)">净值管理</el-button>
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
          </span>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageInfo.page"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="pageInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageInfo.totalNum">
    </el-pagination>

     <!--增加对话框-->
    <el-dialog title="产品详情" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm">
        <el-row>
          <el-col :span="24">
            ——————基本信息—————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品系列" :label-width="formLabelWidth">
              <el-select v-model="addForm.prodCategoryName" placeholder="请选择">
                <el-option :key="oneProdType.prodId" :label="oneProdType.prodChineseName"
                           :value="oneProdType.prodChineseName" v-for="oneProdType in prodTypeData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级分类" :label-width="formLabelWidth">
              <el-select v-model="addForm.parentClass" placeholder="请选择">
                <el-option label="对冲基金" value="对冲基金"></el-option>
                <el-option label="共同基金" value="共同基金"></el-option>
                <el-option label="普通基金" value="普通基金"></el-option>
                <el-option label="其他基金" value="其他基金"></el-option>
                <el-option label="健康保险" value="健康保险"></el-option>
                <el-option label="证券理财" value="证券理财"></el-option>
                <el-option label="普通私募" value="普通私募"></el-option>
                <el-option label="阳光私募" value="阳光私募"></el-option>
                <el-option label="银行理财" value="银行理财"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" :label-width="formLabelWidth">
              <el-input v-model="addForm.prodName" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资管机构" :label-width="formLabelWidth">
              <el-select v-model="addForm.prodChannelName" placeholder="请选择">
                <el-option :key="oneChannel.prodChannelId" :label="oneChannel.prodChannelName"
                           :value="oneChannel.prodChannelName" v-for="oneChannel in channelData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年化收益率" :label-width="formLabelWidth">
              <el-input v-model="addForm.anlRate" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货币类型" :label-width="formLabelWidth">
              <el-select v-model="addForm.currencyType" placeholder="请选择">
                <el-option label="CNY" value="CNY"></el-option>
                <el-option label="HKD" value="HKD"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            ——————认购属性—————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开放时间" :label-width="formLabelWidth">
              <el-date-picker v-model="addForm.opeTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择开放时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认购周期" :label-width="formLabelWidth">
              <el-input v-model="addForm.subsPeriod" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="基金管理费率" :label-width="formLabelWidth">
              <el-input v-model="addForm.fundManageRate" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认购费率" :label-width="formLabelWidth">
              <el-input v-model="addForm.subsRate" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起投金额" :label-width="formLabelWidth">
              <el-input v-model="addForm.iniInvestAmt" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认购费收取方式" :label-width="formLabelWidth">
              <el-input v-model="addForm.subsCoMethod" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            ——————赎回属性—————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="赎回周期" :label-width="formLabelWidth">
              <el-input v-model="addForm.redCycle" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="赎回起始金额" :label-width="formLabelWidth">
              <el-input v-model="addForm.redStartAmt" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="赎回费" :label-width="formLabelWidth">
              <el-input v-model="addForm.redFee" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="锁定期(封闭期)" :label-width="formLabelWidth">
              <el-input v-model="addForm.lockTime" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            ——————————————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核人" :label-width="formLabelWidth">
              <el-select v-model="addForm.managerName" placeholder="请选择">
                <el-option :key="oneManager.userId" :label="oneManager.userName"
                           :value="oneManager.userName" v-for="oneManager in managerData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">关 闭</el-button>
        <el-button type="primary" @click="executeAdd()">保 存</el-button>
      </div>
    </el-dialog>

    <!--修改对话框-->
    <el-dialog title="产品详情" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm">
        <el-row>
          <el-col :span="24">
            ——————基本信息—————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品系列" :label-width="formLabelWidth">
              <el-select v-model="editForm.prodCategoryName" placeholder="请选择">
                <el-option :key="oneProdType.prodId" :label="oneProdType.prodChineseName"
                           :value="oneProdType.prodChineseName" v-for="oneProdType in prodTypeData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级分类" :label-width="formLabelWidth">
              <el-select v-model="editForm.parentClass" placeholder="请选择">
                <el-option label="对冲基金" value="对冲基金"></el-option>
                <el-option label="共同基金" value="共同基金"></el-option>
                <el-option label="普通基金" value="普通基金"></el-option>
                <el-option label="其他基金" value="其他基金"></el-option>
                <el-option label="健康保险" value="健康保险"></el-option>
                <el-option label="证券理财" value="证券理财"></el-option>
                <el-option label="普通私募" value="普通私募"></el-option>
                <el-option label="阳光私募" value="阳光私募"></el-option>
                <el-option label="银行理财" value="银行理财"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" :label-width="formLabelWidth">
              <el-input v-model="editForm.prodName" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资管机构" :label-width="formLabelWidth">
              <el-select v-model="editForm.prodChannelName" placeholder="请选择">
                <el-option :key="oneChannel.prodChannelId" :label="oneChannel.prodChannelName"
                           :value="oneChannel.prodChannelName" v-for="oneChannel in channelData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年化收益率" :label-width="formLabelWidth">
              <el-input v-model="editForm.anlRate" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货币类型" :label-width="formLabelWidth">
              <el-select v-model="editForm.currencyType" placeholder="请选择">
                <el-option label="CNY" value="CNY"></el-option>
                <el-option label="HKD" value="HKD"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            ——————认购属性—————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开放时间" :label-width="formLabelWidth">
              <el-date-picker v-model="editForm.opeTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择开放时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认购周期" :label-width="formLabelWidth">
              <el-input v-model="editForm.subsPeriod" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="基金管理费率" :label-width="formLabelWidth">
              <el-input v-model="editForm.fundManageRate" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认购费率" :label-width="formLabelWidth">
              <el-input v-model="editForm.subsRate" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起投金额" :label-width="formLabelWidth">
              <el-input v-model="editForm.iniInvestAmt" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认购费收取方式" :label-width="formLabelWidth">
              <el-input v-model="editForm.subsCoMethod" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            ——————赎回属性—————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="赎回周期" :label-width="formLabelWidth">
              <el-input v-model="editForm.redCycle" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="赎回起始金额" :label-width="formLabelWidth">
              <el-input v-model="editForm.redStartAmt" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="赎回费" :label-width="formLabelWidth">
              <el-input v-model="editForm.redFee" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="锁定期(封闭期)" :label-width="formLabelWidth">
              <el-input v-model="editForm.lockTime" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            ——————————————————————————————————————————————————————————
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核人" :label-width="formLabelWidth">
              <el-select v-model="editForm.managerName" placeholder="请选择">
                <el-option :key="oneManager.userId" :label="oneManager.userName"
                           :value="oneManager.userName" v-for="oneManager in managerData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">关 闭</el-button>
        <el-button type="primary" @click="executeEdit()">保 存</el-button>
      </div>
    </el-dialog>

    <!--净值编辑对话框-->
    <el-dialog title="编辑净值" :visible.sync="remiDialogFormVisible">
      <el-form :model="remiForm">
        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input v-model="remiForm.prodName" autocomplete="off" placeholder="不可编辑" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="单位净值" :label-width="formLabelWidth">
          <el-input v-model="remiForm.averNav" autocomplete="off" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="净值基准日" :label-width="formLabelWidth">
          <el-date-picker
              v-model="remiForm.netValBaseDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="累计增长率" :label-width="formLabelWidth">
          <el-input v-model="remiForm.culGrowRate" autocomplete="off" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remiDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="executeRemi()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prodData: [],
      prodTypeData:[],
      channelData: [],
      managerData:[],
      queryForm: {
        prodName: '',
        prodCategoryName: '',
        prodState:'',
      },
      pageInfo: {
        page: 2,
        pageSize: 20,
        totalNum: 50,
      },
      addDialogFormVisible: false,
      addForm:{
        prodCategoryName: '',
        parentClass: '',
        prodName: '',
        prodChannelName: '',
        anlRate: '',
        currencyType: '',
        opeTime: '',
        subsPeriod: '',
        fundManageRate: '',
        subsRate: '',
        iniInvestAmt: '',
        subsCoMethod: '',
        redCycle: '',
        redStartAmt: '',
        redFee: '',
        lockTime: '',
        managerName:'',
      },
      editDialogFormVisible: false,
      editForm: {
        prodId: '',
        prodCategoryName: '',
        parentClass: '',
        prodName: '',
        prodChannelName: '',
        anlRate: '',
        currencyType: '',
        opeTime: '',
        subsPeriod: '',
        fundManageRate: '',
        subsRate: '',
        iniInvestAmt: '',
        subsCoMethod: '',
        redCycle: '',
        redStartAmt: '',
        redFee: '',
        lockTime: '',
        managerName:'',
      },
      remiDialogFormVisible: false,
      remiForm: {
        prodId: '',
        prodName: '',
        averNav:'',
        netValBaseDate:'',
        culGrowRate:'',
      },

      formLabelWidth: "120px",

    }
  },
  methods: {

    toRemi(index, row) {
      this.remiDialogFormVisible = true;
      var reqData = "prodId=" + row.prodId;
      this.queryProdByUidRemi(reqData);
    },
    queryProdByUidRemi(reqData) {
      this.$axios
          .post("/basic/toRemi", reqData)
          .then((resp) => {
            this.remiForm = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    executeRemi() {
      this.remiDialogFormVisible = false;
      this.operateCUD("/basic/remi", this.$qs.stringify(this.remiForm));
    },


    toEdit(index, row) {
      this.editDialogFormVisible = true;
      this.querySeries();
      this.queryChannel();
      this.queryManager();
      var reqData = "prodId=" + row.prodId;
      this.queryProdByUid(reqData);
    },
    queryProdByUid(reqData) {
      this.$axios
          .post("/basic/toEdit", reqData)
          .then((resp) => {
            this.editForm = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    executeEdit() {
      this.editDialogFormVisible = false;
      this.operateCUD("/basic/edit", this.$qs.stringify(this.editForm));
    },
    executeDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var reqData="prodId="+row.prodId;
        this.operateCUD("/basic/delete",reqData);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    operateCUD(reqUrl, reqData) {
      this.$axios.get(reqUrl + "?" + reqData)
          .then(resp => {
            if (resp.data.returnCode === 2002) {
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: 'success'
              });

              this.pageInfo.page = 1;
              this.pageInfo.pageSize = 5;
              var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
              this.queryProd(reqData);
            } else if (resp.data.returnCode === 4002) {
              this.$message({
                showClose: true,
                message: resp.data.returnMsg,
                type: 'error'
              });
            }

          })
          .catch(error => {
            console.log(error)
          });
    },
    toAdd() {
      this.addDialogFormVisible = true;
      this.addForm = {};
      this.querySeries();
      this.queryChannel();
      this.queryManager();
    },
    executeAdd() {
      this.addDialogFormVisible = false;
      this.operateCUD("/basic/add", this.$qs.stringify(this.addForm));
    },
    queryManager(){
      this.$axios
          .post("/basic/queryManager", "")
          .then((resp) => {
            this.managerData = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    queryChannel() {
      this.$axios
          .post("/series/queryChannel", "")
          .then((resp) => {
            this.channelData = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    resetForm(queryForm) {
      this.$refs[queryForm].resetFields();
      this.queryForm={prodName: '',
        prodCategoryName: '',
        prodState:'',};
      this.queryProd("");
    },
    executeQuery() {
      var reqData = this.$qs.stringify(this.queryForm);
      this.queryProd(reqData);
    },
    handleSizeChange(val) {
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = val;
      var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
      this.queryProd(reqData);
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
      this.queryProd(reqData);
    },
    queryProd(reqData) {
      this.$axios.post("/basic/query", reqData).then(resp => {
        this.prodData = resp.data.returnData.prodList;
        this.pageInfo = resp.data.returnData.pageInfo;
      })
          .catch(error => {
            console.log(error);
          })
    },
    querySeries() {
      this.$axios
          .post("/basic/querySeries", "")
          .then((resp) => {
            this.prodTypeData = resp.data.returnData;
          })
          .catch((error) => {
            console.log(error);
          });
    },
  },
  mounted() {
    this.queryProd("");
    this.querySeries();
  },
}
</script>
<style>
/* 设置对话框上的日期组件样式 */
div>.el-date-editor.el-input {
  width: 100%;
}
</style>